<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>职员管理</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/font.css">
		<link rel="stylesheet" href="css/xadmin.css">
		
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css">
	
		<link rel="stylesheet" href="../css/mystyle.css">
	</head>
	<body class=" layui-fluid" background="../images/09161932_zr_299f7.jpg" style="background-size: 100%;background-attachment: fixed;">
		<h1 class="title-text">职员管理</h1>
		<div class="main-style">
			
			<div>
				<a href=""  class="sub-add btn btn-info" data-toggle="modal" data-target="#add-modal">添加</a>
			</div>
			<table class="table table-striped table-bordered tb-color " style="font-size: 15px;">
				<thead class="table-dark tbh-center">
					<tr>
						<th>选择</th>
						<th>序号</th>
						<th>职员编号</th>
						<th>职员姓名</th>
						<th>职员性别</th>
						<th>职员年龄</th>
						<th>职员电话</th>
						<th>入职时间</th>
						<th>所在部门</th>
						<th>所处职位</th>
						<th>职员邮箱</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody-clerk" class="tbb-center">


				</tbody>
				
			</table>
		  <nav aria-label="Page navigation example" class="page-main">
			<ul  id="ul-pages"  class="pagination mypages">

			</ul>
		  </nav>
		</div>
		
		<!--添加模态框 -->
		<!-- Modal -->
		<div class="modal fade" id="add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h6 class="modal-title" id="exampleModalLabel">添加职员</h6>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
				<form id="form-add">
					
				  <div class="form-group row">
				    <label for="input-cname" class="col-sm-3 col-form-label">职员名称：</label>
				    <div class="col-sm-9">
				      <input name="cname" type="text" class="form-control" id="input-cname">
				    </div>
				  </div>
				  
				  <div class="form-group row">
				    <label for="input-cgender" class="col-sm-3 col-form-label">职员性别：</label>
				    <div class="col-sm-9">
				      <div class="form-check form-check-inline">
					   <input name="cgender" checked class="form-check-input" type="radio" id="inlineCheckbox1" value="0">
					   <label class="form-check-label" for="inlineCheckbox1">女</label>
					  </div>
					  <div class="form-check form-check-inline">
					   <input name="cgender"  class="form-check-input" type="radio" id="inlineCheckbox2" value="1">
					   <label class="form-check-label" for="inlineCheckbox2">男</label>
					  </div>
				    </div>
				  </div>
				  
				  <div class="form-group row">
				    <label for="input-cage" class="col-sm-3 col-form-label">职员年龄：</label>
				    <div class="col-sm-9">
				      <input name="cage" type="text" class="form-control" id="input-time">
				    </div>
				  </div>
				  
				  <div class="form-group row">
				    <label for="input-cphone" class="col-sm-3 col-form-label">职员电话：</label>
				    <div class="col-sm-9">
				      <input name="cphone" type="text" class="form-control" id="input-time">
				    </div>
				  </div>
				  
				  <div class="form-group row">
					 <label for="input-cjoinTime" class="col-sm-3 col-form-label">入职日期：</label>
					 <div class="col-sm-9">
					   <input name="cjoinTime" type="date" class="form-control" id="input-cjoinTime">
					 </div>
				  </div>
				  
				  <div class="form-group row">
					<label for="input-cdepartment1" class="col-sm-3 col-form-label">所属部门：</label>
					<div class="col-sm-9">
					  <select name="cdepartment" class="form-control" id="input-cdepartment1" >
		   
					<!-- 动态渲染下拉选型 -->
					   </select>
					</div>
				  </div>
				  
				  <div class="form-group row">
					<label for="input-cduty1" class="col-sm-3 col-form-label">所处职位：</label>
					<div class="col-sm-9">
					  <select name="cduty" class="form-control" id="input-cduty1" >
		   
					<!-- 动态渲染下拉选型 -->
					   </select>
					</div>
				  </div>
				  
				  <div class="form-group row">
				    <label for="input-cemail" class="col-sm-3 col-form-label">职员邮箱：</label>
				    <div class="col-sm-9">
				      <input name="cemail" type="text" class="form-control" id="input-cemail">
				    </div>
				  </div>
				  
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addData()">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
			
			<!-- 修改模态框 -->
			<div class="modal fade" id="modify-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h6 class="modal-title" id="exampleModalLabel">修改职员信息</h6>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
					<form id="form-modify">
						
						<div class="form-group row">
						  <label for="input-cid" class="col-sm-3 col-form-label">职员ID：</label>
						  <div class="col-sm-9">
						    <input name="cid" type="number" class="form-control" id="input-cid">
						  </div>
						</div>
						
					  <div class="form-group row">
					    <label for="input-cname" class="col-sm-3 col-form-label">职员名称：</label>
					    <div class="col-sm-9">
					      <input name="cname" type="text" class="form-control" id="input-name">
					    </div>
					  </div>
					  
					  <div class="form-group row">
					    <label for="input-cgender" class="col-sm-3 col-form-label">职员性别：</label>
					    <div class="col-sm-9">
					      <div class="form-check form-check-inline">
						   <input name="cgender" checked class="form-check-input" type="radio" id="inlineCheckbox1" value="0">
						   <label class="form-check-label" for="inlineCheckbox1">女</label>
						  </div>
						  <div class="form-check form-check-inline">
						   <input name="cgender" placeholder="" class="form-check-input" type="radio" id="inlineCheckbox2" value="1">
						   <label class="form-check-label" for="inlineCheckbox2">男</label>
						  </div>
					    </div>
					  </div>
					  
					  <div class="form-group row">
					    <label for="input-cage" class="col-sm-3 col-form-label">职员年龄：</label>
					    <div class="col-sm-9">
					      <input name="cage" type="text" class="form-control" id="input-time">
					    </div>
					  </div>
					  
					  <div class="form-group row">
					    <label for="input-cphone" class="col-sm-3 col-form-label">职员电话：</label>
					    <div class="col-sm-9">
					      <input name="cphone" type="text" class="form-control" id="input-time">
					    </div>
					  </div>
					  
					  <div class="form-group row">
						 <label for="input-cjoinTime" class="col-sm-3 col-form-label">入职日期：</label>
						 <div class="col-sm-9">
						   <input name="cjoinTime" type="date" class="form-control" id="input-cjoinTime">
						 </div>
					  </div>
					  
					  <div class="form-group row">
						<label for="input-cdepartment2" class="col-sm-3 col-form-label">所属部门：</label>
						<div class="col-sm-9">
						  <select name="cdepartment" class="form-control" id="input-cdepartment2" >
			   
						<!-- 动态渲染下拉选型 -->
						   </select>
						</div>
					  </div>
					  
					  <div class="form-group row">
						<label for="input-cduty2" class="col-sm-3 col-form-label">所处职位：</label>
						<div class="col-sm-9">
						  <select name="cduty" class="form-control" id="input-cduty2" >
			   
						<!-- 动态渲染下拉选型 -->
						   </select>
						</div>
					  </div>
					  
					  <div class="form-group row">
					    <label for="input-cemail" class="col-sm-3 col-form-label">职员邮箱：</label>
					    <div class="col-sm-9">
					      <input name="cemail" type="text" class="form-control" id="input-cemail">
					    </div>
					  </div>
					  
					</form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
			        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="modifyData()">确定</button>
			      </div>
			    </div>
			  </div>
			</div>
			
			
			<!-- 删除模态框 -->
			<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h6 class="modal-title" id="exampleModalLabel">温馨提示：</h6>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
			      <div class="modal-body">
			      <h6>是否删除id为:<span id="span-cid"></span>的数据</h6>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
			        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteData($('#span-cid').text())">确定</button>
			      </div>
			    </div>
			  </div>
			</div>
			
			
		<script>
			
			let baseUrl = "http://localhost:8080/company"

			// -----------------分页数据展示-------------------
			let pageSize = 5;
			getPageInfo(1)
			
			// 获得分页数据, pageNum=第几页，参数2=每页显示数据量
			function getPageInfo(pageNum) {
				$.ajax({
					url: baseUrl + "/clerk/clerks",
					type: "post", //默认get
					dataType: "json",
					data: `pageNum=${pageNum}&pageSize=${pageSize}`,
					success: function(data){
						// console.log(data)
						if(data.code == 200) {
							// 动态渲染画面
							showClerks(data.pageInfo)
							// 动态渲染分页按钮
							showPages(pageNum, data.pageInfo.pages)
						}
					}
				})
			}
			
			// 动态渲染页面
			function showClerks(pageInfo) {
				// console.log(pageInfo)
				
				// 清空父容器
				$('#tbody-clerk').empty()
				
				// 对数据循环
				$(pageInfo.list).each(function(index, clerk) {
					// 根据数据，动态创建一行表格
					let trClerk = $(`
							<tr>
								<td>
									<input type="checkbox" class="input-delete">
								</td>
								<td style="display: none;">${clerk.cid}</td>
								<td>${index + 1}</td>
								<td>${clerk.cid}</td>
								<td>${clerk.cname}</td>
								<td>${clerk.cgender ? '男':'女'}</td>
								<td>${clerk.cage}</td>
								<td>${clerk.cphone}</td>
								<td>${clerk.cjoinTime}</td>
								<td>${clerk.cdepartment}</td>
								<td>${clerk.cduty}</td>
								<td>${clerk.cemail}</td>
								<td>
									<button type="button" class="btn btn-primary" data-toggle="modal"
										data-target="#modify-modal" data-cid="${clerk.cid}">
									  编辑
									</button>
									<button type="button" class="btn btn-danger" data-toggle="modal" 
										data-target="#delete-modal" data-cid="${clerk.cid}">
										删除
									</button>
								</td>
							</tr>					
					`)
					// 将表格放入父容器
					$('#tbody-clerk').append(trClerk)
				})				
			}	
			
			// ---------------- 动态分页 ------------------------
			function showPages(pageNum, pages) {
				// 清空父容器
				$('#ul-pages').empty()
				
				let sy = $(`
					<li class="page-item ${1 == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Previous" 
							onclick = "getPageInfo(1)">
						<span aria-hidden="true">&laquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(sy)
				
				for (var i = 0; i < pages; i++) { 
					let pageStr = `
						<li class="page-item  ${i+1 == pageNum ? 'active' : ''} ">
							<a  
								class="page-link"
								href="javascript:;"
							    onclick = "getPageInfo(${i+1})">${i+1}
							</a>
						</li>
					`
					let page = $(pageStr)
					$('#ul-pages').append(page)
				}
				
				// getPageInfo
				let wy = $(`
					<li class="page-item ${pages == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Next"
							onclick = "getPageInfo(${pages})">
					    <span aria-hidden="true">&raquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(wy)
				
			}

			// ----------- 删除数据---------------
			$('#delete-modal').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget) 
				var cid = button.data('cid')
				// console.log(cid)
				var modal = $(this)
				modal.find('#span-cid').text(cid)
				// console.log(cid)
			})

			function deleteData(cid) {
				// console.log('删除数据了...' + cid)
				$.ajax({
					url: baseUrl + "/clerk/delete",
					type: "delete",
					dataType: "json",
					data: "id="+cid,
					success: function(data){
						if(data.code == 200) {
							// 刷新画面
							getPageInfo(1)
						}
					}
				})
			}
	
			
			// -------------- 添加 --------------
			function addData() {
				let clerk = $('#form-add').serialize()
				// console.log(clerk)
				$.ajax({
					url: baseUrl + "/clerk/add",
					type: "post",
					dataType: "json",
					data: clerk,
					success: function(data) {
						if(data.code == 200) {
							console.log('成功')
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
						
			// -------------- 修改 --------------
			function modifyData() {
				let modifydu = $('#form-modify').serialize()
				console.log(modifydu)
				$.ajax({
					url: baseUrl + "/clerk/modify",
					type: "post",
					dataType: "json",
					data: modifydu,
					success: function(data) {
						if(data.code == 200) {
							console.log(data)
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
			
			
			 // 获得部门的下拉列表
		   function getDepartmentList() {
			$.ajax({
			 url: baseUrl + "/department/departmentall",
			 type: "post",
			 dataType: "json",
			 success: function(data) {
			    console.log(data)
				showDepartmentList(data.departments)
				showDepartmentList1(data.departments)
			 }
			})
		   }
		   
		   // 动态渲染下拉列表
		   function showDepartmentList(departments) {
			$('#input-cdepartment').empty()
			$(departments).each(function(index, department) {
			 let cdepartmentOpt = $(`
			  <option value="${department.dname}">${department.dname}</option>
			 `)
			 $('#input-cdepartment1').append(cdepartmentOpt)
			})
		   }
		   
		   function showDepartmentList1(departments) {
		   			$('#input-cdepartment').empty()
		   			$(departments).each(function(index, department) {
		   			 let cdepartmentOpt = $(`
		   			  <option value="${department.dname}">${department.dname}</option>
		   			 `)
		   			 $('#input-cdepartment2').append(cdepartmentOpt)
		   			})
		   }
		   
		   $('#add-modal').on('show.bs.modal', function (event) {
			getDepartmentList()
		   })
		   
		   $('#modify-modal').on('show.bs.modal', function (event) {
			getDepartmentList()
		   })
		   
		   
		   
		   // 获得职位的下拉列表
		   function getDutyList() {
			$.ajax({
			 url: baseUrl + "/duty/dutyall",
			 type: "get",
			 dataType: "json",
			 success: function(data) {
			  console.log(data)
			  showDutyList(data.duties)
			  showDutyList1(data.duties)
			 }
			})
		   }
		   
		   // 动态渲染下拉列表
		   function showDutyList(duties) {
			$('#input-cduty').empty()
			$(duties).each(function(index, duty) {
			 let dutyOpt = $(`
			  <option value="${duty.dname}">${duty.dname}</option>
			 `)
			 $('#input-cduty1').append(dutyOpt)
			})
		   }
		   
		   function showDutyList1(duties) {
		   			$('#input-cduty').empty()
		   			$(duties).each(function(index, duty) {
		   			 let dutyOpt = $(`
		   			  <option value="${duty.dname}">${duty.dname}</option>
		   			 `)
		   			 $('#input-cduty2').append(dutyOpt)
		   			})
		   }
		   
		   $('#add-modal').on('show.bs.modal', function (event) {
			getDutyList()
		   })
		   
		   $('#modify-modal').on('show.bs.modal', function (event) {
			getDutyList()
		   })
			
		</script>	
	</body>
</html>